<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Basic Layout - jQuery EasyUI Demo</title>
    <link
      rel="stylesheet"
      type="text/css"
      href="../css/themes/default/easyui.css"
    />
    <link rel="stylesheet" type="text/css" href="../css/themes/icon.css" />
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
    <script src="../js/jquery.serializejson.min.js"></script>
    <style>
      table {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <table id="dg" data-options="fitColumns:true,scrollbarSize:0"></table>
    <div id="tb" style="padding:2px 5px;">
      <input id="name" label="用户名称:" style="width:10%;" />

      <a
        href="#"
        id="searchData"
        class="easyui-linkbutton"
        iconCls="icon-search"
        >查找</a
      >
      <a
        href="#"
        id="addData"
        class="easyui-linkbutton"
        data-options="iconCls:'icon-add'"
        >添加数据</a
      >
      <a
        href="#"
        id="removesData"
        class="easyui-linkbutton"
        data-options="iconCls:'icon-remove'"
        >删除多个</a
      >
    </div>

    <div
      id="dlg"
      class="easyui-dialog"
      title="表单信息"
      data-options="iconCls:'icon-save',closed: true"
      style="width:400px;padding:10px;"
    >
      <form
        id="ff"
        class="easyui-form"
        method="post"
        data-options="novalidate:true"
      >
        <input name="_id" style="width:100%;visibility:hidden;" />

        <div style="margin-bottom:5px">
          <input
            class="easyui-textbox"
            name="name"
            style="width:100%"
            data-options="label:'用户名:',required:true,
            validType:'length[6,20]'"
          />
        </div>
        <div style="margin-bottom:5px">
          <input
            class="easyui-passwordbox"
            name="password"
            style="width:100%"
            data-options="label:'密码:',required:true,
            validType:'length[6,20]'"
          />
        </div>
        <div style="margin-bottom:5px">
          <input
            class="easyui-numberbox"
            name="tel"
            style="width:100%"
            data-options="label:'手机号码:',required:true,
            validType:'length[6,20]'"
          />
        </div>
        <div style="margin-bottom:5px">
          <input
            class="easyui-textbox tel"
            name="email"
            style="width:100%"
            data-options="label:'邮箱:',required:true,validType:'email'"
          />
        </div>
        <div style="margin-bottom:5px">
          <input
            class="easyui-textbox"
            name="address"
            style="width:100%"
            data-options="label:'地址:',required:true"
          />
        </div>
        <div style="margin-bottom:5px">
          <input
            class="easyui-textbox"
            name="status"
            style="width:100%"
            data-options="label:'状态:',required:true"
          />
        </div>
        <div style="margin-bottom:5px">
          <input
            class="easyui-numberbox age"
            name="age"
            style="width:100%"
            data-options="label:'年龄:',required:true"
          />
          <span class="age-info"></span>
        </div>
        <div style="margin-bottom:5px">
          <!-- <input
            class="easyui-textbox"
            name="sex"
            style="width:100%"
            data-options="label:'性别:',required:true"
          /> -->
          性别：<label style="margin-left:30px;">
            男<input class="easyui-radiobutton male"  checked name="sex" value="male" >
            女<input class="easyui-radiobutton female" name="sex" value="female">
          </label>

        </div>
        <div style="margin-bottom:5px">
          <input
            class="easyui-textbox"
            name="hobby"
            style="width:100%"
            data-options="label:'爱好:',required:true"
          />
        </div>
        <div style="margin-bottom:5px">
          <input
            id="dd"
            class="easyui-datetimebox"
            name="regtime"
            style="width:100%"
            data-options="label:'注册时间:',required:true"
          />
        </div>
      </form>
      <div style="text-align:center;padding:5px 0">
        <a
          href="javascript:void(0)"
          class="easyui-linkbutton"
          onclick="submitForm()"
          style="width:80px"
          >提交</a
        >
        <a
          href="javascript:void(0)"
          class="easyui-linkbutton"
          onclick="clearForm()"
          style="width:80px"
          >重置</a
        >
      </div>
    </div>
  </body>
</html>

<script>
  function submitForm() {
    //提交信息
    $('#ff').form('submit', {
      onSubmit: function() {
        if (
          $(this)
            .form('enableValidation')
            .form('validate')
        ) {
          var formData = $('#ff').serializeJSON();
              if(formData.sex=='female'){
                formData.sex=false;
              }else{
                formData.sex=true;
              }

              console.log(formData);
          if (formData._id.length > 0) {
            $.ajax({
              url: `${window.parent.globalURL}users/${formData._id}`,
              type: 'put',
              data: formData
            }).done(function(res) {
              $('#dlg').dialog('close');
              $('#dg').datagrid('reload');
              $('#ff').form('clear');
            });
          } else {

            //console.log(formData.regtime);
            delete formData._id;
            $.ajax({
              url: `${window.parent.globalURL}users/`,
              type: 'post',
              data: formData
            }).done(function(res) {
              //console.log(res);
              $('#dlg').dialog('close');
              $('#dg').datagrid('reload');
              $('#ff').form('clear');
            });
          }
        }

      }
    });
    return false;
  }
  function clearForm() {
    $('#ff').form('clear');
  }
  $('#dg').datagrid({
    url: `${window.parent.globalURL}users/list`,
    type: 'post',
    striped: true,
    fit: 'true',
    border: false,
    toolbar: '#tb',
    pagination: true,
    columns: [
      [
        { field: 'ck', checkbox: true },
        { field: 'name', title: '用户名', width: '10%' },
        { field: 'password', title: '密码', width: '10%' },
        { field: 'tel', title: '手机号码', width: '10%' },
        { field: 'email', title: '邮箱', width: '10%' },
        { field: 'address', title: '地址', width: '10%' },
        { field: 'status', title: '状态', width: '10%' },
        { field: 'age', title: '年龄', width: '5%' },
        {
          field: 'sex',
          title: '性别',
          width: '5%',
          formatter: function(value) {
            if (value == true) {
              return '男';
            } else {
              return '女';
            }
          }
        },
        { field: 'regtime', title: '注册时间', width: '10%' },
        {
          field: 'hobby',
          title: '爱好',
          width: '8%',
          formatter: function(value, row, index) {
            return value.toString();
          }
        },
        {
          field: '_id',
          title: '操作',
          width: '8%',
          formatter: function(value, row, index) {
            return `<a href="javascript:void(0)" onclick="updateData('${
              row._id
            }')">修改</a>
             <a href="javascript:void(0)" onclick="deleteData('${
               row._id
             }')">删除</a>`;
          }
        }
      ]
    ]
  });

  function deleteData(id) {
    $.messager.confirm('确认对话框', '你确认删除吗？', function(r) {
      if (r) {
        $.ajax({
          url: `${window.parent.globalURL}users/${id}`,
          type: 'delete'
        }).done(function(res) {
          $('#dg').datagrid('reload');
        });
      }
    });
  }

  function deleteDatas() {
    var rows = $('#dg').datagrid('getSelections');
    var ids = [];
    for (var i = 0; i < rows.length; i++) {
      ids.push(rows[i]._id);
    }
    $.messager.confirm('确认对话框', '你确认删除吗?', function(r) {
      if (r) {
        $.ajax({
          url: `${window.parent.globalURL}users/deletes`,
          type: 'post',
          data: {
            ids: ids.toString()
          }
        }).done(function(res) {
          $('#dg').datagrid('reload');
        });
      }
    });
  }

  function updateData(id) {
    $();
    $.ajax({
      url: `${window.parent.globalURL}users/${id}`,
      type: 'get'
    }).done(function(res) {
      $('#ff').form('load', {
        _id: res._id,
        name: res.name,
        password: res.password,
        tel: res.tel,
        email: res.email,
        address: res.address,
        status: res.status,
        age: res.age,
        sex: res.sex,
        regtime: res.regtime,
        hobby: res.hobby
      });
      $('#dlg').dialog('open');
      //$('#ff').form('load', res);
      //$('#dlg').dialog('open');
    });
  }

  $('#searchData').click(function() {
    //console.log($('#name').val());
    $('#dg').datagrid({
      queryParams: {
        name: $('#name').val()
      }
    });
  });
  $('#addData').click(function() {
    $('#dlg').dialog('open');
  });

  $('#removesData').click(function() {
    deleteDatas();
  });
</script>
